#@admin_header()
<!-- 内容主体区域 -->
<div class="layui-body">
  <div style="padding: 15px;">
    <div class="layui-row">
      <button title="新增" onclick="add()" class="layui-btn layui-btn-normal">
        <i class="layui-icon">&#xe654;</i>新增
      </button>
    </div>
    <div class="layui-row">
      <div class="layui-col-md12">
        <fieldset class="layui-elem-field layui-field-title">
          <legend>分类管理</legend>
        </fieldset>
        <table class="layui-table">
          <thead>
          <tr>
            <th>分类名称</th>
            <th>描述</th>
            <th width="50">文章数</th>
            <th width="50">优先级</th>
            <th width="130">最后更新时间</th>
            <th width="160">操作</th>
          </tr>
          </thead>
          <tbody>
          #for(x : page.getList())
          <tr id="#(x.id)">
            <td>#(x.name)</td>
            <td>#(x.description)</td>
            <td>#(x.content_count)</td>
            <td>#(x.order_number)</td>
            <td>#date(x.update_time??)</td>
            <td>
              <button title="编辑" onclick="edit($(this).parents('tr'))"
                      class="layui-btn layui-btn-small layui-btn-normal">
                <i class="layui-icon">&#xe642;</i></button>
              <button title="删除" onclick="del($(this).parents('tr'))"
                      class="layui-btn layui-btn-small layui-btn-danger">
                <i class="layui-icon">&#xe640;</i></button>
              <button title="查看" class="layui-btn layui-btn-small">
                <i class="layui-icon">&#xe602;</i></button>
            </td>
          </tr>
          #end
          </tbody>
        </table>
        #@_page(page, adminRoot+ '/content/catelog', '')
      </div>
    </div>
  </div>
</div>
<script>
  //JavaScript代码区域
  layui.use(['table'], function () {
  });

  /**
   * 新增分类界面
   */
  function add() {
    var html = '';
    html += '<div id="formAdd" style="padding: 20px 15px 0 15px;">';
    html += '<form class="layui-form layui-form-pane">';
    html += '<div class="layui-form-item">';
    html += '<label class="layui-form-label">分类名称</label>';
    html += '<div class="layui-input-block">';
    html += '<input type="text" name="catelogName" lay-verify="catelogName" value="" placeholder="分类名称" autocomplete="off" class="layui-input" spellcheck="false">';
    html += '</div>';
    html += '</div>';
    html += '<div class="layui-form-item">';
    html += '<label class="layui-form-label">分类说明</label>';
    html += '<div class="layui-input-block">';
    html += '<input type="text" name="catelogDesc" lay-verify="catelogDesc" value="" placeholder="分类说明" autocomplete="off" class="layui-input" spellcheck="false">';
    html += '</div>';
    html += '</div>';
    html += '</form>';
    html += '</div>';
    var addLayerId = layui.layer.open({
      type: 1,
      skin: 'layui-layer-molv',
      title: '<i class="layui-icon">&#xe654;</i> 新增', //不显示标题
      content: html,
      area: ['400px', ''],
      shade: 0.3,
      shadeClose: true,
      // move: false,
      resize: false,
      offset: '100px',
      closeBtn: 0,
      btn: ['确定', '取消'],
      yes: function () {
        doSave(addLayerId);
      }
    });
    $('[name=catelogName]').focus();
  }

  /**
   * 新增分类 - 保存
   * @param  {[type]} layerId 弹出层id
   * @return {void}
   */
  function doSave(layerId) {
    var name = $('[name=catelogName]').val();
    var desc = $('[name=catelogDesc]').val();
    ToastLoading('正在保存...');
    $.post("#(adminRoot)/content/catelog/add/save", {name: name, desc: desc})
      .success(function (ret) {
        ToastShow(ret.code, ret.msg, ret.url);
      })
      .error(function () {
        ToastErr('网络错误');
      })
  }

  /**
   * 删除分类的提示
   * @param  {Doc} dom 数据所在行的tr节点
   * @return {void}
   */
  function del(dom) {
    var cid = dom.attr('id');
    var name = dom.children('td').eq(0).html();
    var delLayerId = layui.layer.confirm('确定要删除分类【<font size=+1>' + name + '</font>】<br/><font color=red>删除后将不可恢复</font>',
      {
        icon: 3,
        skin: 'layui-layer-molv',
        title: '提示',
        shade: 0.3,
        shadeClose: true,
        // move: false,
        resize: false,
        offset: '100px',
        closeBtn: 0,
        btn: ['确定', '取消'],
        yes: function () {
          doDelete(dom, delLayerId);
        }
      });
  }

  /**
   * 删除分类 - 保存
   * @param  {Doc} dom 数据所在行的tr节点
   * @return {void}
   */
  function doDelete(dom, layerId) {
    var cid = dom.attr('id');
    ToastLoading('正在删除...');
    $.post("#(adminRoot)/content/catelog/delete/one", {cid: cid})
    // .success(function(ret) { ToastShow(ret.code, ret.msg, ret.url); })
      .success(function (ret) {
        if (ret.state == 'ok') {
          ToastShow('100', ret.msg, ret.url);
          layui.layer.close(layerId);
          dom.hide(); // 隐藏删除的tr
        } else {
          ToastShow(ret.code, ret.msg, ret.url);
        }
      })
      .error(function (ret) {
        ToastErr('网络错误');
      })
  }

  /**
   * 修改分类的界面
   * @param  {Doc} dom 数据所在行的tr节点
   * @return {void}
   */
  function edit(dom) {
    // var name = dom.children[0].innerHTML;
    // var desc = dom.children[1].innerHTML;
    var cid = dom.attr('id');
    var name = dom.children('td').eq(0).html();
    var desc = dom.children('td').eq(1).html();
    $('[name=catelogId]').val(cid);
    $('[name=catelogName]').val(name);
    $('[name=catelogDesc]').val(desc);
    var html = '';
    html += '<div id="formUpdate" style="padding: 20px 15px 0 15px;">';
    html += '<form class="layui-form layui-form-pane">';
    html += '<input type="hidden" name="catelogId" value="' + cid + '">';
    html += '<div class="layui-form-item">';
    html += '<label class="layui-form-label">分类名称</label>';
    html += '<div class="layui-input-block">';
    html += '<input type="text" name="catelogName" lay-verify="catelogName" value="' + name + '" placeholder="分类名称" autocomplete="off" class="layui-input" spellcheck="false">';
    html += '</div>';
    html += '</div>';
    html += '<div class="layui-form-item">';
    html += '<label class="layui-form-label">分类说明</label>';
    html += '<div class="layui-input-block">';
    html += '<input type="text" name="catelogDesc" lay-verify="catelogDesc" value="' + desc + '" placeholder="分类说明" autocomplete="off" class="layui-input" spellcheck="false">';
    html += '</div>';
    html += '</div>';
    html += '</form>';
    html += '</div>';
    var editLayerId = layui.layer.open({
      type: 1,
      skin: 'layui-layer-molv',
      title: '<i class="layui-icon">&#xe642;</i> 修改',
      content: html,
      area: ['400px', ''],
      shade: 0.3,
      shadeClose: true,
      // move: false,
      resize: false,
      offset: '100px',
      closeBtn: 0,
      btn: ['确定', '取消'],
      yes: function () {
        doUpdate(dom, editLayerId);
      }
    });
    $('[name=catelogName]').focus();
  }

  /**
   * 更新数据 - 保存
   * @param  {Doc} dom     当前数据位置的tr节点
   * @param  {[type]} layerId 弹出层的id
   * @return {void}
   */
  function doUpdate(dom, layerId) {
    var cid = $('[name=catelogId]').val();
    var name = $('[name=catelogName]').val();
    var desc = $('[name=catelogDesc]').val();
    ToastLoading('正在保存...');
    $.post("#(adminRoot)/content/catelog/edit/save", {cid: cid, name: name, desc: desc})
      .success(function (ret) {
        if (ret.state == 'ok') {
          ToastShow('100', ret.msg, ret.url);
          layui.layer.close(layerId);
          dom.children('td').eq(0).html(name);
          dom.children('td').eq(1).html(desc);
        } else {
          ToastShow(ret.code, ret.msg, ret.url);
        }
      })
      .error(function (ret) {
        ToastErr('网络错误');
      })
  }
</script>
#@admin_footer()
